<!-- <template>
  <el-form ref="companySearchForm" :model="companySearchForm" :rules="companySearchRules" class="register-form" autocomplete="on" label-position="left">

    <el-form-item prop="company_name">
      <span class="svg-container">
        <i class="el-icon-office-building" />
      </span>
      <el-input
        ref="company_name"
        v-model="companySearchForm.company_name"
        placeholder="请输入公司名称"
        name="company_name"
        type="text"
        tabindex="1"
        autocomplete="on"
        @blur="companyNameBlur"
      />
    </el-form-item>

    <el-form-item prop="phone">
      <span class="svg-container">
        <i class="el-icon-mobile-phone" />
      </span>
      <el-input
        ref="phone"
        v-model="companySearchForm.phone"
        placeholder="请输入公司负责人电话"
        name="phone"
        type="text"
        tabindex="2"
        autocomplete="on"
      />
    </el-form-item>

    <el-form-item>
      <div style="height: 80px;">
        <graph-verify-code GraphVerifyCodeId="CompanySearchGraph" @GraphVerifyCodeValue="GraphVerifyCodeValue"></graph-verify-code>
      </div>
    </el-form-item>

    <el-form-item prop="graph_verify_code">
      <span class="svg-container">
        <i class="el-icon-picture" />
      </span>
      <el-input
        ref="graph_verify_code"
        v-model="companySearchForm.graph_verify_code"
        placeholder="请输入图片验证码"
        name="graph_verify_code"
        type="text"
        tabindex="3"
        autocomplete="on"
      />
    </el-form-item>

    <el-button type="text" style="width:100%;margin-bottom:30px;" @click.native.prevent="verifyCodeCountdownHandle" :disabled="isVerifyCode">
      {{ downCounterShow }}
    </el-button>

    <el-form-item prop="verify_code">
      <span class="svg-container">
        <i class="el-icon-message" />
      </span>
      <el-input
        ref="verify_code"
        v-model="companySearchForm.verify_code"
        placeholder="请输入手机验证码"
        name="verify_code"
        type="text"
        tabindex="4"
        autocomplete="on"
      />
    </el-form-item>

    <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleCompanySearch">
      公司查询
    </el-button>
  </el-form>
</template>

<script>
import { validCompanyName, validPhone, validVerifyCode, validGraphVerifyCode } from '@/utils/validate'
import GraphVerifyCode from '@/components/GraphVerifyCode'
import { companyNameIfRegisterApi } from '@/api/company.js'
import { verifyCodeCreateApi } from '@/api/verify-code.js'
import { messageMethod } from '@/methods/messageTipsMethod.js'
export default {
  name: 'CompanySearchForm',
  components: { GraphVerifyCode },
  data () {
    const validateCompanyName = (rule, value, callback) => {
      if (!validCompanyName(value)) {
        callback(new Error('请输入正确的公司名称(纯中文)'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入11位数的电话号码'))
      } else {
        callback()
      }
    }
    const validateVerifyCode = (rule, value, callback) => {
      if (!validVerifyCode(value)) {
        callback(new Error('请输入6位纯数字的验证码'))
      } else {
        callback()
      }
    }
    const validateGraphVerifyCode = (rule, value, callback) => {
      if (!validGraphVerifyCode(value)) {
        callback(new Error('请输入图形验证码只有4位'))
      } else {
        callback()
      }
    }
    return {
      companySearchForm: {
        company_name: '',
        phone: '',
        verify_code: '',
        graph_verify_code: ''
      },
      companySearchRules: {
        company_name: [{ required: true, trigger: 'blur', validator: validateCompanyName }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        verify_code: [{ required: true, trigger: 'blur', validator: validateVerifyCode }],
        graph_verify_code: [{ required: true, trigger: 'blur', validator: validateGraphVerifyCode }]
      },
      downCounterShow: '获取手机验证码',
      isVerifyCode: false,
      companySearchGraphVerifyCode: '',
      loading: false,
      showDialog: false,
    }
  },
  methods: {
    companyNameBlur() {
      let company_name = this.companySearchForm.company_name
      if (validCompanyName(company_name)) {
        companyNameIfRegisterApi(company_name)
          .then(res => {
            if (res.data.length <= 0) {
              messageMethod(this, '公司名称未注册，请先注册', 'warning')
            }
          })
          .catch(res => {
          })
      }
    },
    verifyCodeCountdownHandle () {
      /* 验证码倒计时
       * 180秒后才能再次获取手机验证码 */
      let phone = this.companySearchForm.phone
      if (validPhone(phone)) {
        verifyCodeCreateApi ({
          'phone': phone
        })
          .then(res => {
            this.timeCount = 0
            messageMethod(this, '手机验证码为：' + res.data.verify_code, 'success')
          })
          .catch(res => {
          })
        let timeCount = 180
        this.isVerifyCode = true
        setInterval(() => {
          if (timeCount > 0) {
            timeCount -= 1
            this.downCounterShow = '重新获取验证码时间：' + timeCount + '秒'
          } else {
            this.downCounterShow = '获取手机验证码'
          }
        }, 1000)
      }
    },
    GraphVerifyCodeValue (codeValue) {
      this.companySearchGraphVerifyCode = codeValue
    },
    handleCompanySearch() {
      this.$refs.companySearchForm.validate(valid => {
        if (valid) {
          if (this.companySearchForm.graph_verify_code === this.companySearchGraphVerifyCode || this.companySearchForm.graph_verify_code.toLocaleLowerCase() === this.companySearchGraphVerifyCode) {
            this.loading = true
            let company_name = this.companySearchForm.company_name
            companyNameIfRegisterApi(company_name)
              .then(res => {
                // 前端应该显示一个公司信息表格
                // console.log('公司信息：', res.data)
                messageMethod(this, '公司代码：' + res.data[0].company_code, 'success', 0)
              })
              .catch(res => {
                this.loading = false
              })
          } else {
            messageMethod(this, '图形验证码错误', 'warning')
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped>
</style>
 -->